<template>
  <div id='temp'>
      <!--loadding效果  -->
      <vue-loading v-if='isshowing' type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>    
      <div class='imgs'>
          <h4>{{item.title}}</h4>
          <p class="ctime">{{item.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}} {{item.click}}次浏览</p> 
          <p class="line"></p>  
      </div>
      <!--缩略图  -->
       <!-- <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(item,index) in images" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                          vue-preview的img不能放在a标签里面 
                   <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, images)">

                </li>
            </ul> 
		</div>  -->
        <!--如果数组images有数据就显示vue-images  -->
        <vue-images v-if='images.length!=0' :imgs="images"
                            :modalclose="modalclose"
                            :keyinput="keyinput"
                            :mousescroll="mousescroll"
                            :showclosebutton="showclosebutton"
                            :showcaption="showcaption"
                            :imagecountseparator="imagecountseparator"
                            :showimagecount="showimagecount"
                            :showthumbnails="showthumbnails">
                </vue-images>


        <p class='content' v-html='item.content'></p>
        <comment :id='id'></comment> 
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from "../../kits/common.js";
//导入子组件
import comment from '../subcom/comment.vue';

//导入实现loadding的子组件
import vueLoading from 'vue-loading-template';

//vue-images预览
import vueImages from 'vue-images';



export default {
    //注册子组件
    components:{
      comment,
      vueImages,//图片预览子组件
      vueLoading
      
  },
  data () {
    return {
        isshowing:true,
        id:0,
        item:{},
        images:[],
        modalclose: true,
        keyinput: true,
        mousescroll: true,
        showclosebutton: true,
        showcaption: true,
        imagecountseparator: '/',
        showimagecount: true,
        showthumbnails: true
    };
  },
  created(){
      this.id=this.$route.params.id;
      this.getinfo();
      this.getimgs();
  },
  methods:{
    getinfo(){
        var url=common.apidomain+'/api/getimageInfo/'+this.id;
        this.$http.get(url).then(function(res){
            if(res.body.status!=0){
                toast(res.body.message);
                return;
            }
            this.item=res.body.message[0];
        })
    },
    getimgs(){
        var url=common.apidomain+'/api/getthumimages/'+this.id;
        this.$http.get(url).then(function(res){
            this.isshowing=false;
            if(res.body.status!=0){
                Toast(res.body.message);
                return;
            }
            //由于vue-preview要求数据有src，w，h属性，但是服务器返回的数据没有w和h
            res.body.message.forEach(function(item){
                
                var img=new Image();
                img.src=item.src;
                item.h=img.height;
                item.w=img.width;
                item.imageUrl=item.src;
                item.caption="标题";

            });
            this.images=res.body.message;
        })
    },
  

  }
}

</script>
<style scoped>
    .imgs{
        padding:5px;
    }
    .imgs h4{
        color:#0094ff;
        font-size: 14px;
    }
    .imgs p.ctime{
        color:rgba(0,0,0,0.4);
        font-size:12px;
    }
    .imgs .line{
        width: 100%;
        height: 1px;
        background-color: rgba(0,0,0,0.4);
    }

    .mui-content{
        background-color:#fff;
    }
    .mui-grid-view.mui-grid-9 .mui-media{
        border:none;
    }
    .mui-grid-view.mui-grid-9{
        background-color:#fff;
        border:none;
    }

    .mui-content img{
        width: 100px;
        height: 100px;
    }
    .content{
        padding:0 5px;
    }
    
</style>